<template>
    <div class="newslistContainer">
        <!-- 这是newslist组件 -->
        <!-- 使用Mint-ui Infinite scroll指令 实现上滑加载数据-->
        <!-- v-infinite-scroll="loadMore"此属性用来设置AJAX请求数据的方法 -->
        <!--  v-infinite-scroll-disabled此属性用来设置该组件是否还继续响应上滑请求动作，
            该属性是一个bool类型值，true表示已经加载完成所有数据
        -->
        <!-- infinite-scroll-distance 属性用来设置当组件底部距离多远的时候
        就触发loadmore事件
         -->
        <ul class="newslist"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="isLoading"
            infinite-scroll-distance="10"
            style="max-height:100vh; overflow-y:auto;"
            >
            <li v-for="item in list" :key="item.Msg">
                <router-link :to="'/home/newsinfo/' + item.id">
                    <p class="news_title">{{item.title}}</p>
                    <p class="news_des">
                        <span class="author">{{item.author}}</span>
                        <span class="add_time">{{item.add_time | dateFormat}}</span>
                        <span class="click_count">点击量:{{item.click_count}}</span>
                    </p>
                </router-link>
            </li>
            <!-- 加载动画部分 -->
            <li class="more_loading">
               <mt-spinner type="fading-circle" v-show="is_loading_more"></mt-spinner>
               <span v-show="finished">已经加载全部信息</span>
            </li>
        </ul>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    name:'newslist',
        data(){
            return{
                list:[], //新闻列表
                isLoading:false, //默认是要响应上滑动作的
                pageindex:1,
                pagesize:10,
                is_loading_more:false, //控制是否显示 加载动画图标
                finished:false,  //控制是否显示已经加载所有数据
            }
        },
        created(){
            this.loadMore();
        },
        methods:{

        loadMore() {
            this.isLoading = true;
            this.is_loading_more = true;
            this.finished = false;
                this.$ajax({
                    method:'get',
                    url:'/news/newslist',
                    params:{
                        pageindex:this.pageindex,
                        pagesize:this.pagesize,
                    }
                }).then(response => {
                    console.log(response);
                  var data=response.data;
                    if(data.Status == 0){
                        data.Data.forEach(item => {
                            item.add_time = new Date();
                        })
                        this.list = this.list.concat(data.Data); //拼接两个数组，不能直接赋值
                       console.log(this.list.length);
                       console.log(response);
                       this.pageindex++;
                       this.isLoading = false;  //允许再响应上滑的动作
                       this.is_loading_more = false;
                        if(data.Data.length < this.pagesize){ //此时请求的数据是最后一页
                            this.isLoading  = true;
                            this.finished = true;
                        }
                    }else{ //没拿到数据
                        this.finished = true;
                        Toast('从服务器获取失败');
                    }
                })
            }
        }
    }
</script>

<style lang="less">
 .newslistContainer{
     .newslist{
            margin-top:5px;
            list-style: none;
            padding:0 15px;
            li{
                border-bottom:1px solid #ddd;
            }
            p{
                margin:0px;
            }
            p.news_title{
                padding-top: 10px;
                font-size: 16px;
                color:#333;
            }
            p.news_des{
                padding: 4px;
                font-size: 12px;
                color:#aaa;
                display: flex;
                justify-content: space-between;
            }
        }

        .more_loading{
            font-size: 12px;
            color:#aaa;
            border:none;
            text-align: center;
            .mint-spinner-fading-circle{
                position: relative;
                left:45%;
            }
        }
 }
</style>